<template>
  <div class="index">
    <div class="font">
      <h1>RNX-GRAB-CASE-SYSTEM</h1>
    </div>
    <canvas
      class="ribbon"
      id="bgCanvas"
      width="100%"
      height="100%"
    ></canvas>
    <div class="code">
      <el-input
        v-model="input"
        show-password
        ref="user"
        @keyup.enter.native="check"
        placeholder="请输入密码"
        style="margin-right: 10px"
      ></el-input>
      <el-button type="primary" @click="check"
        >开始<i class="el-icon-right"></i
      ></el-button>
    </div>
  </div>
</template>

<script>
import "@/assets/js/ribbons.js";
const axios = require("axios");
export default {
  name: "index",
  data() {
    return {
      input: "",
    };
  },
  mounted() {
    //初始化背景
    new Ribbons();
    //初始化焦点
    this.$refs.user.focus();
  },
  methods: {
    check() {
      let _this = this;
      axios
          .post("/df/api/checkPassword", {pwd: _this.input})
          .then(function (response) {
            let f = response.data.data;
            if (f) {
              localStorage.setItem("pwd", _this.input);
              _this.$router.push("/pregrabcase");
            }else{
              _this.$message.error('密码错误!');
            }
          });
    },
  },
};
</script>

<style>
.font {
  font-family: "Skylen";
  font-size: 50px;
  width: 100%;
  height: 20%;
  text-align: center;
}

.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.code {
  display: flex;
  flex-direction: row;
  padding: 5rem;
}

.ribbon {
  position: fixed;
  z-index: -999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
</style>